<template>
  <!--维护列表的 meta -->
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>列表属性</span>
          </div>
        </template>
        <el-scrollbar height="600px">
          <help-grid-base :meta="gridMeta" :reMeta="reMeta"/>
        </el-scrollbar>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>导出json</span>
          </div>
        </template>
        <help-grid-ouput :reMeta="gridMeta"></help-grid-ouput>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>列属性</span>
          </div>
        </template>
        <help-grid-col :formMeta="gridMeta"/>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import { ElRow, ElCol, ElCard, ElScrollbar } from 'element-plus'
  // help
  import helpGridBase from './grid-base.vue'
  import helpGridCol from './grid-col.vue'
  import helpGridOuput from './grid-ouput.vue'

  /**
   * 直接维护 json 
   */
  export default defineComponent({
    name: 'nf-help-meta-grid-card',
    directives: {
    },
    components: {
      ElRow, ElCol, ElCard, ElScrollbar,
      helpGridBase,
      helpGridCol,
      helpGridOuput
    },
    props: {
      gridMeta: Object
    },
    setup(props, context) {
      const gridMeta = props.gridMeta

      const reMeta = reactive({
        gridMeta: {},
        gridTable: {},
        itemMeta: {}

      })
      Object.assign(reMeta.gridMeta, gridMeta.gridMeta)
      Object.assign(reMeta, gridMeta)
      Object.assign(reMeta.itemMeta, gridMeta.itemMeta)

      return {
        reMeta
      }
    }
  })
</script>